import React, { useEffect, useState } from "react"
import './index.css'
import LRslide from '../../../../components/l-r-slide'
//
import banner from '../../../../assets/u=270711349,2152740631&fm=253&fmt=auto&app=138&f=JPEG.webp'

export default () => {

    // # data

    const [load, setLoad] = useState(0)

    // # methods

    // # mounted

    const mounted = () => {
        if (load == 0) {
            setLoad(() => 1)
        }
    }

    // # update

    const updates = () => {

    }

    // # destroyed

    const destroyeds = () => {
        if (React.updateobj.updates == 1) {
            setTimeout(() => {
                React.updateobj.updates = 0
            })
        } else {
            //这里是页面销毁的逻辑
        }
    }

    useEffect(() => {

        //# mounted

        mounted()

        //# update

        updates()

        //# destroyed

        return destroyeds

    }, [])

    return (
        <div style={React.globalcss}>

            <div style={{ position: 'relative', height: 200, backgroundColor: '#ccc' }}>
                <img style={{ width: '100%', height: '100%' }} src={banner} alt="" />
                <div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', backgroundColor: 'rgba(0,0,0,.5)' }}>
                    <div style={{ position: 'absolute', top: 30, left: '10%', color: 'white', fontSize: 30, fontWeight: 800 }} className="leftin">Villiage road</div>
                    <div style={{ position: 'absolute', bottom: 30, right: '10%', color: 'white', fontSize: 20 }} className="rightin">get your relax life now</div>
                </div>
            </div>

            {/*  */}
            <div style={{ padding: '30px 0' }}>
                <span className="smalltitle-left"></span>今日推荐
            </div>
            <LRslide id="a" />
        </div>
    )
}